<template>
  <div class="aside">
    
    <div @click="collapsefn" class="collapseBtn"><i class="el-icon-loading"></i></div>
     <el-menu
      
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      background-color="#333744"
      text-color="#fff"
      active-text-color="#ffd04b"
      router
      unique-opened
      :collapse ='isCollapse'
      >
      <el-submenu :index="String(index)"  v-for="(item, index) in list" :key="index">
        <template slot="title">
          <i :class="['iconfont', iconList[index]]"></i>
          <span>{{item.authName}}</span>
        </template >
        <el-menu-item-group >
         
          <el-menu-item :index="item.path" v-for="(item, index) in item.children" :key="index"  @click="pathloc(item.path)">
             <i class="el-icon-menu"></i>
            {{item.authName}}</el-menu-item>
         
        </el-menu-item-group>
      
       
      </el-submenu>
    
    </el-menu>
   
  </div>
</template>

<script>
import { menus_api}  from '@/api/index'

export default {
 
  data() {
    return {
      isCollapse: false,
      list : [],
     iconList: [
        'icon-user',
        'icon-tijikongjian',
        'icon-shangpin',
        'icon-danju',
        'icon-baobiao',
      ],

    }
  },
  methods: {
    handleOpen(key, keyPath) {
      // console.log(key, keyPath)
    },
    handleClose(key, keyPath) {
      // console.log(key, keyPath)
    },
    collapsefn() {
      this.isCollapse = !this.isCollapse 
    },
    pathloc(i){
       
       window.localStorage.setItem('path', i)
    }
    
  },
 async created() {
      var res = await menus_api()
      // console.log(res.data.data);
      this.list = res.data.data

  },
  mounted() {
    var path = window.localStorage.getItem('path') || 'users'
    this.$router.push('/'+ path)

  },
}
</script>

<style scoped lang='less'>
.aside {
  background-color: #333744;
  .collapseBtn{
    color:#fff;
    text-align: center;
    background-color: #333744;
    cursor: pointer;
  }
  .el-menu{
    border-right: 1px solid #333744;
    
  }
 .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 280px;
  }
}
.iconfont{
  padding-right: 15px;
}
</style>